<template>
  <view class="record record-detail">
    <view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/images/bg-6.png)` }"></view>
    <view class="record-content">
      <view class="tips">请凭下方预约二维码现场签到进场</view>
      <view class="card detail">
        <view class="title">{{ detail.title }}</view>
        <view class="date">
          {{ detail.reservation_date }} {{ detail.week }}{{ detail.reservation_start_time }} -
          {{ detail.reservation_end_time }}
        </view>
        <view class="line"></view>
        <view class="info">
          预约人：{{ detail.realname }}
        </view>
        <view class="info">
          手机：{{ detail.telephone }}
        </view>
        <view class="info">
          访客人数：{{ detail.visitor_number }}人
        </view>
        <view class="qrcode">
          <image :src="detail.qrcode" mode="widthFix" />
        </view>
      </view>
      <view class="buttons" @click="cancelReservation">
        <fh-button type="plain" @click="cancelReservation">
          取消预约
        </fh-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { baseUrl } from '@/reservation/config'
import { onLoad } from "@dcloudio/uni-app";
import fhButton from "../components/fh-button.vue";
import { ref } from 'vue'
import { reservationDetail, reservationCancel } from '@/api/reservation'
defineOptions({
  name: 'record-detail',
})
// 获取参数
const id = ref(0)
const detail = ref({
  title: '', // 预约标题
  reservation_date: '', // 预约日期
  reservation_start_time: '', // 预约开始时间
  reservation_end_time: '', // 预约结束时间
  week: '', // 星期
  qrcode: '', // 预约二维码
  realname: '', // 预约人姓名
  telephone: '', // 预约人手机号
  visitor_number: '', // 访客人数

})
onLoad((options) => {
  id.value = options.id
  console.log(id.value)
  options.id && getDetail()
})
const getDetail = () => {
  reservationDetail({
    openid: uni.getStorageSync('reservation_openid'),
    id: id.value,
  }).then((res) => {
    detail.value = res.data
    // 翻译星期
    detail.value.week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][Number(detail.value.week)]
  })
}

const cancelReservation = () => {
  console.log('取消预约')
  reservationCancel({
    openid: uni.getStorageSync('reservation_openid'),
    id: id.value,
  }).then((res) => {
    console.log(res)
    if (res.code == 0) {
      uni.showToast({
        title: '取消成功',
        icon: 'success',
      })
      uni.navigateBack()
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  })
}

</script>

<style lang="less" scoped>
@import './index.less';
</style>
